Welcome

First of all, Thank you so much for purchasing this item. You are really awesome! You are entitled to get free lifetime updates to this product and support from the - ThemeTags team directly.

Local Setup

There are two ways to change your style (CSS) for your template.

First of all, you can change your style from dist/asseta/css/main.css then upload the changed file to your live server.

The second way,  If you want to change your style through SCSS. In that case, you need to follow the below steps to prepare your local environment and run it on your local. You can also minify the CSS. After your changes, you need to upload your changes assets (CSS) to your live server.


Installation SASS

Install SASS to your local through NodeJs:

Prerequisite: Node.js:

It is used to run the build processes. Download from the NodeJs from the official site and install it on your device according to your Operating System (nodejs.org)

Check NodeJs Version:

  • Open the Terminal/ Command Line
  • Run: node -v or node --version
  • If you get the version then the installation of NodeJs is done


$ node --version
 $ v16.15.0

** Supported nodejs version v16.x.x

Check NPM Version:

  • Open the Terminal/ Command Line
  • Run: npm -v or npm --version
  • If you get the version then the installation of NodeJs is done

$ npm --version
$ 8.5.5

SASS Install:

  • Open the Terminal/ Command Line
  • Run: npm install -g sass
  • Run: sass --version
  • For Windows user, you need to set sass to the environment path: Go to environment variables - > system variables -> path -> Edit , and include file: C:\Users\<your-user>\AppData\Roaming\npm\sass. Then, Accept everything. and it's done.
  • For more information, check: https://sass-lang.com/install
$ sass --version
$ 1.60.0 compiled with dart2js 2.19.5


How to Run SASS
  • After installing SASS, need to go to your project directory from your terminal/ command line. Path:  <your unzip folder>/html/hostim. Check that you have src and  dist folders. To check that run on terminal: ls. For RTL version, path will be: <your unzip folder>/html/hostim-rtl. 
  • Compile and Watch: Run on terminal:  sass --watch src/assets/scss/main.scss dist/assets/css/main.css Or, you can generate the CSS file only:  sass src/assets/scss/main.scss dist/assets/css/main.css . Official document: https://sass-lang.com/documentation/cli/dart-sass
  • Test: to check the changes, open a file (dist/index.html) and reload the page after your change in SCSS file. You will find the SCSS file in src/assets/scss/ folder. SCSS official documentation: https://sass-lang.com/guide

How to Make HTML Template Live?

Steps to make live:

  • Download your item from Envato and unzip it.
  • Change files or styles based on your needs. Path: <your unzip folder>/html/hostim. For RTL version path will be <your unzip folder>/html/hostim-rtl.
  • After the changes, zip the hostim/dist folder and upload to your hosting webroot.
  • Unzip your uploaded file if it is a zip version and browse from your domain: yourdomain.com
  • To install the WHMCS template, Please check the WHMCS documentation.

Folder Structure

After unzipping the downloaded file from Envato, you will get 4 folders - 

  1. HTML template - folder name: hostim
  2. RTL version of HTML template - folder name: hostim-rtl
  3. WHMCS templates - folder name: whmcs
  4. and Documentation

Hostim HTML template folder structure:

  • dist/ - compiled distribution files or production files
  • src/ - contains all of your core, working files—scss files.
  • src/assets/ - scss files are here

Template Customization

This is the section that you can find how to customize any section. Before that, you need to know about HTML structure and standard. Please check below:

HTML Structure

Here is the HTML Structure of the template. Please check each section of the code. You will gain an idea from here. For more details, please check the HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--required meta tags-->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--favicon icon-->
    <link rel="icon" href="assets/img/favicon.png" type="image/png" sizes="16x16"/>

    <!--title-->
    <title>Hostim - HTML Template</title>

    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Urbanist:wght@600;700&display=swap" rel="stylesheet">

    <!--build:css-->
    <link rel="stylesheet" href="assets/css/main.css" />
    <!-- endbuild -->

    <!--custom css-->
    <link rel="stylesheet" href="assets/css/custom.css" />

  </head>

  <body>

    <!--body overlay -->
    <div class="body-overlay"></div>

    <!--scrolltop button -->
    <button class="scrolltop-btn"><i class="fa-solid fa-angle-up"></i></button>
   
    <!--preloader start-->
    <div class="loader-wrap">
       
    </div>
    <!--preloader end-->  

    <!--main content wrapper start-->
    <div class="main-wrapper">
   
      <!--header area start-->
      <header class="header-section header-gradient">
          <div class="topbar">
              <div class="container">
                 
              </div>
          </div>
          <div class="header-nav">
              <div class="container">
                  <div class="nav-menu bg-white">
                     
                  </div>
              </div>
          </div>
      </header>  <!--header area end-->
   
      <!--mobile menu start-->
      <div class="mobile-menu position-fixed bg-white deep-shadow">
          <button class="close-menu position-absolute"><i class="fa-solid fa-xmark"></i></button>
          <a href="index.html" class="logo-wrapper"><img src="assets/img/logo.png" alt="logo" class="img-fluid"></a>
          <nav class="mobile-menu-wrapper mt-40">

          </nav>

      </div>  <!--mobile menu end-->
   
      <!--offcanvus area start-->
      <div class="ofcanvus-menu">
          <button class="close-canvus"><i class="fa-solid fa-xmark"></i></button>
          <div class="megamenu">
             
          </div>
      </div>
      <!--offcanvus area end-->
   
      <!--hero section start-->
      <section class="hero-style-1">
          <div class="hero-area overflow-hidden position-relative zindex-1 bg-primary-gradient pt-110">
             
          </div>
      </section>  <!--hero section end-->
   
      <!--pricing section-->
      <section class="pricing-tab-section light-bg pb-120 position-relative zindex-1 overflow-hidden">
          <img src="assets/img/shapes/line-red-top.png" alt="line shape" class="position-absolute right-top d-none d-lg-block">
          <img src="assets/img/shapes/line-red.svg" alt="line shape" class="position-absolute left-bottom">
          <div class="container">
             
          </div>
      </section>  <!--pricing section end-->
   
      <!--migrate hosting start-->
      <section class="migrate-hosting bg-primary-gradient position-relative zindex-1">
         
      </section>  <!--migrate hosting end-->
   
      <!--feature section start-->
      <section class="feature-area pt-120 pb-80" data-background="assets/img/bg-shape.jpg">
          <div class="container">
             
          </div>
      </section>  <!--feature section end-->
   
      <!--consult section start-->
      <section class="consult-area position-relative zindex-1 overflow-hidden" data-background="assets/img/consult-bg.png">
         
      </section>
      <!--consult section end-->
   
      <!--domain search-->
      <section class="domain-area light-bg">
          <div class="container">
             
          </div>
      </section>  <!--domain search end-->
   
      <!--services section start-->
      <section class="service-section light-bg pt-120 pb-120 overflow-hidden position-relative zindex-1">
         
      </section>  <!--services section end-->
   
      <!--feedback section start-->
      <section class="feedback-section bg-primary-gradient pt-120 position-relative overflow-hidden">
          <div class="container">
             
          </div>
          <div class="explore-btn position-absolute">
              <a href="testimonials.html" class="template-btn hm2-primary-btn">More Feedback</a>
          </div>
      </section>  <!--feedback section end-->
   
      <!--blog section start-->
      <section class="blog-section light-bg pt-120 pb-120 overflow-hidden">
          <div class="container">
             
          </div>
      </section>  <!--blog section end-->
   
      <!--applications area start-->
      <section class="application-area light-bg pb-120 position-relative zindex-1 overflow-hidden">
         
      </section>  <!--applications area end-->
   
      <!-- Footer Area -->
      <footer class="footer pt-100">
          <div class="footer-top pb-60">
              <div class="container">
                 
              </div>
          </div>
          <div class="footer-copyright">
              <div class="container">
                 
              </div>
          </div>
      </footer>  <!-- Footer Area End -->
     
    </div>
    <!-- main content wrapper ends -->
   

    <!--build:js-->
    <script src="assets/js/vendors/jquery.min.js"></script>
    <script src="assets/js/vendors/popper.min.js"></script>
    <script src="assets/js/vendors/bootstrap.min.js"></script>
    <script src="assets/js/vendors/easing.min.js"></script>
    <script src="assets/js/vendors/swiper.min.js"></script>
    <script src="assets/js/vendors/massonry.min.js"></script>
    <script src="assets/js/vendors/bootstrap-slider.js"></script>
    <script src="assets/js/vendors/magnific-popup.js"></script>
    <script src="assets/js/vendors/waypoints.js"></script>
    <script src="assets/js/vendors/counterup.js"></script>
    <script src="assets/js/app.js"></script>
    <!--endbuild-->
  </body>
</html>


Head of the Template
<!DOCTYPE html>
<html lang="en">
  <head>
    <!--required meta tags-->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--favicon icon-->
    <link rel="icon" href="assets/img/favicon.png" type="image/png" sizes="16x16"/>

    <!--title-->
    <title>Hostim - HTML Template</title>

    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Urbanist:wght@600;700&display=swap" rel="stylesheet">

    <!--build:css-->
    <link rel="stylesheet" href="assets/css/main.css" />
    <!-- endbuild -->

    <!--custom css-->
    <link rel="stylesheet" href="assets/css/custom.css" />

  </head>


How to change page title?

In this head section, you can find the title tag. Just replace the text in title tag. Here is the code block:


    <!--title-->
    <title>Hostim - HTML Template</title>


How to change Favicon?
In the Head, check the below code and change the favicon path from href:

    <!--favicon icon-->
    <link rel="icon" href="assets/img/favicon.png" type="image/png" sizes="16x16"/>


Header Section

In this header part, you will find the main menu and the topbar menu. Check the sample at the below:


<header class="header-section header-gradient">
    <div class="topbar">
        <div class="container">
            <div class="row align-item-center">
                <div class="col-md-6">
                    <div class="topbar-left">
                        <p class="mb-0">Get 50% Discount Offer <mark>26 Days</mark></p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="topbar-right text-end">
                        <a href="login.html">Login</a>
                        <a href="signup.html">Sign up</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-nav">
        <div class="container">
            <div class="nav-menu bg-white">
                <div class="row align-items-center">
                    <div class="col-lg-2 col-6">
                        <div class="logo-wrapper">
                            <a href="index.html"><img src="{{roots}}assets/img/logo.png" alt="logo" class="logo"></a>
                        </div>
                    </div>
                    <div class="col-xl-8 col-lg-7 d-none d-lg-block">
                        <div class="nav-wrapper">
                            <nav>
                                <ul>
                                    <li class="has-submenu"><a href="#">Home</a>
                                        <ul class="menu-list">
                                            <li><a href="index.html">
                                                <div class="menu-list-wrapper d-flex align-items-center">
                                                    <img src="{{roots}}assets/img/server.svg" alt="server" class="list-logo">
                                                    <div class="menu-list-content-right ms-3">
                                                        <h6>Web Hosting</h6>
                                                        <span>Powerful bare metal server</span>
                                                    </div>
                                                </div>
                                            </a></li>
                                            <li><a href="index-2.html">
                                                <div class="menu-list-wrapper d-flex align-items-center">
                                                    <img src="{{roots}}assets/img/server-1.svg" alt="server" class="list-logo">
                                                    <div class="menu-list-content-right ms-3">
                                                        <h6>Hosting Services</h6>
                                                        <span>Flexible virtual machine</span>
                                                    </div>
                                                </div>
                                            </a></li>
                                            <li><a href="index-3.html">
                                                <div class="menu-list-wrapper d-flex align-items-center">
                                                    <img src="{{roots}}assets/img/laptop.svg" alt="server" class="list-logo">
                                                    <div class="menu-list-content-right ms-3">
                                                        <h6>Game Hosting</h6>
                                                        <span>Super fast game server</span>
                                                    </div>
                                                </div>
                                            </a></li>
                                        </ul>
                                    </li>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="domain.html">Domain</a></li>
                                    <li class="has-submenu"><a href="#">Hosting</a>
                                        <ul class="menu-list">
                                            <li><a href="shared-hosting.html">
                                                <div class="menu-list-wrapper d-flex align-items-center">
                                                    <span class="icon-wrapper"><i class="fa-solid fa-server"></i></span>
                                                    <div class="menu-list-content-right ms-3">
                                                        <h6>Shared Hosting</h6>
                                                        <span>Powerful bare metal server</span>
                                                    </div>
                                                </div>
                                            </a></li>
                                            <li><a href="wp-hosting.html">
                                                <div class="menu-list-wrapper d-flex align-items-center">
                                                    <span class="icon-wrapper"><i class="fa-brands fa-wordpress"></i></span>
                                                    <div class="menu-list-content-right ms-3">
                                                        <h6>WordPress Hosting</h6>
                                                        <span>Flexible virtual machine</span>
                                                    </div>
                                                </div>
                                            </a></li>
                                            <li><a href="vps-hosting.html">
                                                <div class="menu-list-wrapper d-flex align-items-center">
                                                    <span class="icon-wrapper"><i class="fa-solid fa-cloud"></i></span>
                                                    <div class="menu-list-content-right ms-3">
                                                        <h6>VPS Hosting</h6>
                                                        <span>Super fast vps server</span>
                                                    </div>
                                                </div>
                                            </a></li>
                                        </ul>
                                    </li>
                                    <li class="has-submenu"><a href="#">Pages</a>
                                        <ul>
                                            <li><a href="service.html">Services</a></li>
                                            <li><a href="pricing.html">Pricing</a></li>
                                            <li><a href="features.html">Features</a></li>
                                            <li><a href="blog-grids.html">Blog Grid</a></li>
                                            <li><a href="blog-list.html">Blog List</a></li>
                                            <li><a href="blog-details.html">Blog Details</a></li>
                                            <li><a href="contact.html">Contact</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-6">
                        <div class="header-right d-flex align-items-center justify-content-end">
                            <div class="lang-switcher d-none d-sm-block dropdown">
                                <a href="#" data-bs-toggle="dropdown"><i class="fa-solid fa-globe"></i>En</span></a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <ul>
                                        <li><a href="#">Dutch</a></li>
                                        <li><a href="#">Bangla</span></a></li>
                                        <li><a href="#">Chinese</a></li>
                                        <li><a href="#">Italian</a></li>
                                        <li><a href="#">French</a></li>
                                        <li><a href="#">German</a></li>
                                        <li><a href="#">Bangla</a></li>
                                        <li><a href="#">English</a></li>
                                        <li><a href="#">Malay</a></li>
                                        <li><a href="#">Arabic</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product-cart">
                                <a href="#"></a>
                            </div>
                            <div class="header-search position-relative dropdown">
                                <button class="border-0" data-bs-toggle="dropdown"></button>
                                <div class="dropdown-menu dropdown-menu-end bg-transparent border-0">
                                    <form class="header-search-form" action="#">
                                        <input type="text" placeholder="Search....">
                                        <input type="submit" value="Go">
                                    </form>
                                </div>
                            </div>
                            <div class="ofcanvus-btns">
                                <a href="#" class="ofcanvus-btn d-none d-lg-block"><i class="fa-solid fa-bars-staggered"></i></a>
                                <a href="#" class="mobile-menu-toggle d-lg-none"><i class="fa-solid fa-bars-staggered"></i></a>
                            </div>    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>


How to change Logo?

You can find the logo under the <div class="logo-wrapper"> tag in header menu container. Change the logo path for the Transparent header.

 <!--logo start -->
  <div class="logo-wrapper">
  <a href="index.html"><img src="{{roots}}assets/img/logo.png" alt="logo" class="logo"></a>
  </div>
  <!--logo end-->


How to change images?

To change the background image, you need to give the image url in data-background

<section class="consult-area" data-background="assets/img/consult-bg.png">
 </section>


VPS slider configuration

To configure the VPS plan, you need to  assets/js/app.js file. 

       

//Price range slider
        $(".range-slider").slider({
            min: 0,
            max: 6,
            value: 2,
        });


We have two type of footer. Footer 1 we have no newsletter section and footer 2 we have a newsletter subscription. 

footer without newsletter: 

<footer class="footer pt-100">
    <div class="footer-top pb-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="footer-widget footer-widget-1">
                        <a href="index.html" class="footer-logo"><img src="{{roots}}assets/img/logo-white.png" class="logo" alt="logo"></a>
                        <p class="text-white mt-30">My service is not something I even think about because it is always there as we agreed.</p>
                        <div class="footer-social mt-5">
                            <h5 class="ft-subtitle text-white position-relative d-inline-block">Follow us on</h5>
                            <ul class="social-nav mt-3">
                                <li><a href="#" class=""><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#" class=""><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#" class=""><i class="fab fa-instagram"></i></a></li>
                                <li><a href="#" class=""><i class="fab fa-linkedin"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-3 col-sm-6">
                    <div class="footer-widget footer-widget-2 mt-2">
                        <h5 class="text-white position-relative mb-5 widget-title">Quick Links</h5>
                        <ul class="footer-nav">
                            <li><a href="contact.html">Support Center</a></li>
                            <li><a href="about.html">About Us</a></li>
                            <li><a href="domain.html">Search Domain</a></li>
                            <li><a href="login.html">My Account</a></li>
                            <li><a href="login.html">Customer Profiles</a></li>
                            <li><a href="contact.html">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-2 col-md-3 col-sm-6">
                    <div class="footer-widget footer-widget-3 mt-2">
                        <h5 class="text-white position-relative mb-5 widget-title">Services</h5>
                        <ul class="footer-nav">
                            <li><a href="shared-hosting.html">Shared Hosting</a></li>
                            <li><a href="wp-hosting.html">WordPress Hosting</a></li>
                            <li><a href="vps-hosting.html">VPS Hosting</a></li>
                            <li><a href="index-3.html">Game Hosting</a></li>
                            <li><a href="vps-hosting.html">Dedicated Hosting</a></li>
                            <li><a href="domain.html">Domain Name</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 col-md-8">
                    <div class="footer-widget footer-sb-widget mt-2">
                        <h5 class="text-white position-relative mb-5 widget-title">Get In Touch</h5>
                        <form action="#" class="footer-sb-form position-relative">
                            <input type="email" placeholder="Type Your Mail">
                            <button type="submit" class="template-btn primary-btn btn-small">Subscribe</button>
                        </form>
                        <div class="ft-payment-method mt-40">
                            <h5 class="text-white position-relative ft-subtitle d-inline-block">We Accepted</h5>
                            <ul class="payment-list d-flex align-items-center mt-3">
                                <li class=""><img src="{{roots}}assets/img/visa.png" alt="visa" class="img-fluid"></li>
                                <li class=""><img src="{{roots}}assets/img/mastercard.png" alt="mastercard" class="img-fluid"></li>
                                <li class=""><img src="{{roots}}assets/img/payoneer.png" alt="payoneer" class="img-fluid"></li>
                                <li class=""><img src="{{roots}}assets/img/paypal.png" alt="paypal" class="img-fluid"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="copyright-txt text-white">
                        <p class="mb-0">Copyright 2022 Hostim. All Rights Reserved</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="copyright-links mt-2 mt-md-0 text-start text-md-end">
                        <a href="#">Terms & Conditions</a>
                        <a href="#" class="ml-20">Privacy Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Footer with Newsletter Section

<section class="hm2-subscribe">
    <div class="container">
        <div class="hm2-sb-area text-center bg-primary-gradient position-relative zindex-1 overflow-hidden">
            <img src="{{roots}}assets/img/shapes/sb-bg.png" alt="bg" class="position-absolute left-top">
            <img src="{{roots}}assets/img/shapes/sb-right.png" alt="shape" class="position-absolute right-bottom">
            <img src="{{roots}}assets/img/shapes/sb-circle-half.png" alt="circle" class="position-absolute right-top">\
             <img src="{{roots}}assets/img/shapes/sb-circle.png" alt="circle" class="position-absolute sb-circle">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <h2 class="text-white">Don't Want to Miss Anything?</h2>
                    <form class="hm2-sb-form mt-3" action="#">
                        <div class="radio-btns">
                            <div class="btns-wrapper">
                                <input type="radio" value="1" id="daily-news" name="duration" checked>
                                <label for="daily-news"><span></span>Daily Newsletter</label>
                            </div>
                            <div class="btns-wrapper">
                                <input type="radio" value="1" id="weekly-news" name="duration">
                                <label for="weekly-news"><span></span>Weekly Newsletter</label>
                            </div>
                            <div class="btns-wrapper">
                                <input type="radio" value="1" id="monthly-news" name="duration">
                                <label for="monthly-news"><span></span>Monthly Newsletter</label>
                            </div>
                        </div>
                        <div class="form-input mt-40 position-relative">
                            <label for="email"><i class="fa-solid fa-envelope"></i></label>
                            <input type="email" id="email" placeholder="Your Email Here">
                            <button type="submit" class="template-btn primary-btn">Subscribe</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<footer class="hm2-footer pt-250 mt--150" data-background="{{roots}}assets/img/shapes/map-bg.png">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-widget footer-nav-widget">
                    <h5 class="widget-title position-relative text-white mb-5">Hostim Hosting</h5>
                    <ul class="footer-nav">
                        <li><a href="pricing.html">Pricing Plans</a></li>
                        <li><a href="features.html">Hostim Features</a></li>
                        <li><a href="#">Add-Ons</a></li>
                        <li><a href="#">Cloudflare Integration</a></li>
                        <li><a href="#">APM Tool</a></li>
                        <li><a href="#">Dev Hostim</a></li>
                        <li><a href="contact.htm">Hostim Support</a></li>
                        <li><a href="#">Free Migration</a></li>
                    </ul>

                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-widget footer-nav-widget">
                    <h5 class="widget-title position-relative text-white mb-5">Company Links</h5>
                    <ul class="footer-nav">
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Clients & Case Studies</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="testimonials.html">Kinsta Reviews</a></li>
                        <li><a href="#">Partners</a></li>
                        <li><a href="#">Why Us</a></li>
                        <li><a href="#">Affiliate Program</a></li>
                    </ul>

                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-widget footer-nav-widget">
                    <h5 class="widget-title position-relative text-white mb-5">Resources Links</h5>
                    <ul class="footer-nav">
                        <li><a href="#">All Resources</a></li>
                        <li><a href="blog-grids.html">Blog</a></li>
                        <li><a href="#">Knowledge Base</a></li>
                        <li><a href="contact.html">Help Center</a></li>
                        <li><a href="#">Feature Updates</a></li>
                        <li><a href="#">Agency Directory</a></li>
                        <li><a href="#">Affiliate Academy</a></li>
                        <li><a href="#">System Status</a></li>
                    </ul>

                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-widget footer-nav-widget">
                    <h5 class="widget-title position-relative text-white mb-5">Products & Solution</h5>
                    <ul class="footer-nav">
                        <li><a href="wp-hosting.html">Managed WordPress Hosting</a></li>
                        <li><a href="shared-hosting.html">Shared Hosting</a></li>
                        <li><a href="vps-hosting.html">VPS Hosting</a></li>
                        <li><a href="index-3.html">Game Hosting</a></li>
                        <li><a href="#">WooCommerce Hosting</a></li>
                        <li><a href="#">Multisite Hosting</a></li>
                        <li><a href="#">Secure Hosting</a></li>
                        <li><a href="#">Hosting for Publishers</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="hm2-footer-copyright">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4 col-md-6 order-2 order-lg-1">
                    <div class="copyright-txt mt-3 mt-lg-0">
                        <p class="mb-0 text-white">&copy; 2022 Hostim. All rights reserved</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 order-1 order-lg-2">
                    <div class="footer-logo text-start text-lg-center">
                        <a href="index.html"><img src="{{roots}}assets/img/logo-white.png" alt="logo" class="logo"></a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 order-3">
                    <div class="footer-social text-start text-lg-end mt-3 mt-lg-0">
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-dribbble"></i></a>
                        <a href="#"><i class="fab fa-behance"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>


Customize with SCSS

We have used the SCSS for style with Inverted Triangle CSS (ITCSS) architecture and all tasks are executing by Gulp. If you do not have any idea or want to learn about SCSS then you can take a look from here: sass-lang.com


SCSS Folder Structure

So, we have the main.scss and it is containing all styles. According to ITCSS architecture, we have used the following folder:


abtract: common define the variables, mixin that can customize the template.

  1. base: globally used spacing and typography.
  2. component: All the button styles are there.
  3. layout: styling for bare HTML elements (header, footer, breadcrumb …).
  4. pages: all the page styles are there.
  5. theme: all theme basic style.
  6. vendors: all third party plugins css
/*================
 Template Name: Hostim - Hosting Services HTML Template
 Template URL: https://hostim.themetags.com/
 Description:
 Version: 1.0
 Author: https://themeforest.net/user/themetags
=======================*/


//Configuration
@import 'abstract/variable';
@import 'abstract/mixin';

//Vendors.
@import "vendors/main";

//Base Stuff
@import 'base/spacing';
@import 'base/typography';

// Layout
@import 'layout/header';
@import 'layout/footer';
@import 'layout/breadcrumb';

//Component
@import 'component/button';

//Themes
@import 'theme/common';
@import 'theme/theme-default';
@import 'theme/animations';
@import 'theme/preloader';

// Pages
@import 'pages/home-1';
@import 'pages/home-2';
@import 'pages/home-3';
@import 'pages/blog-grid';
@import 'pages/blog-details';
@import 'pages/contact';
@import 'pages/shared-hosting';
@import 'pages/domain';
@import 'pages/wp-hosting';
@import 'pages/vps-hosting';
@import 'pages/signup';

If you want to know about ITCSS then you can search with ITCSS. You will find information or tutorial. We have added one site that you may check: dev.to



Helpful Section

Bootstrap Utility Classes

We don't override Bootstrap class, so you can use bootstrap elements class. we have just created custom classes for this template.

Color

.primary-color .secondary-color

Background and gradient color

.bg-primary-gradient, .bg-white, .bg-secondary-gradient

Other classes

.ptb-100, .pt-100, .pb-100, .pt-165 ... etc

btn classes

.outline-btn, .primary-btn, .secondary-btn, .hm2-primary-btn, .hm2-secondary-btn, .gm-primary-btn, .gm-primary-btn

For more information, please check Boostrap's official site: https://getbootstrap.com/docs/5.2/getting-started/introduction/

Credits

Images and Videos

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Hostim a really beautiful template for our awesome users:


JS Libraries

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Hostim a really beautiful template for our awesome users:


CSS and Fonts

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Hostim a really beautiful template for our awesome users:

Customer Support

If you have any trouble while editing this template or if you simply want to ask a question about something, feel free to contact us at hellothemetags@gmail.com or to post your request on Themeforest support form.

Support includes

  • The item support period
  • Answering questions about how to use the item
  • Answering technical questions about the item (and included third party assets)
  • Help with defects in the item or included third party assets
  • Item updates to ensure ongoing compatibility and to resolve security vulnerabilities

Support doesn't include

  • Item customization
  • Installation of the item
  • Hosting, server environment, or software
  • Help from authors of included third party assets

Support is taken very seriously, so every template is completely covered according to ThemeForest’s policies.

Customer Refund Policy

Eligible to get the refund

  • Item is "not as described" or the item doesn’t work the way it should.
  • Item has a security vulnerability
  • Item support is promised but not provided
  • Item support extension not used
  • Items that have not been downloaded

Not eligible to get the refund

  • You don't want it after you've downloaded it
  • The item did not meet your expectations or you feel the item is of low quality
  • You simply change your mind
  • You bought an item by mistake
  • You do not have sufficient expertise to use the item
  • You claim that you are entitled to a refund but do not provide sufficient information as to why you are entitled to a refund
  • You can no longer access the item because it has been removed or the author who previously provided the item is no longer active on our platform (we advise you to download items as soon as you have purchased them to avoid this situation).

Support is taken very seriously, so every template is completely covered according to ThemeForest’s policies.